<template>
  <el-dialog title="导入模型" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
    <div class="j-new-resources-body">
      <el-form ref="form" label-width="100px">
        <el-form-item label="事件名称">
          <el-input v-model="action.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="事件标识">
          <el-input v-model="action.name" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="事件类型">
          <el-radio-group v-model="action.type">
            <el-radio label="GET">获取(GET)</el-radio>
            <el-radio label="POST">提交(POST)</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="事件操作" v-if="action.type == 'POST'">
          <el-radio-group v-model="action.handle">
            <el-radio label="delete">删除(DELETE)</el-radio>
            <el-radio label="update">修改(UPDATE)</el-radio>
            <el-radio label="insert">添加(INSERT)</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="数据集">
          <el-select v-model="action.fields" placeholder="请选择">
            <el-option :label="item.title" :value="item.name" v-for="(item,index) in models" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="筛选集">
          <el-select v-model="action.where" placeholder="请选择" @change="handleWhere">
            <el-option :label="item.title" :value="item.name" v-for="(item,index) in models" :key="index"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleAffirm">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script type="text/javascript">
export default {
  props: {
    value: [Array, Object, Number, String]
  },
  data() {
    return {
      action: {
        title: "",
        name: "",
        type: "GET",
        handle: "delete",
        fields: "",
        where: ""
      },
      dialogVisible: false,
    };
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {
    models: function(argument) {
      return this.value.models
    },
    attribute: function(argument) {
      return this.value.attribute
    }
  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {

  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {

  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
    },
    handleWhere(value) {
      if (this.action.fields == value) {
        this.$message({
          showClose: true,
          message: '筛选数据不能和绑定数据相同',
          type: 'error'
        });
        this.action.where = "";
      }
    },
    /**
     * 确认创建
     */
    handleAffirm() {
      this.attribute.actions.push(this.action);
      this.dialogVisible = false;
    }
  }
}

</script>
<style type="text/css" lang="scss">
</style>
